<template>
  <div :class="'zz-imgbox' + (multiple ? '' : ' single-img')">
    <div class="zz-images">
      <ul
        class="el-upload-list el-upload-list--picture-card"
        v-if="typeof theImages == 'object'"
      >
        <li
          :tabindex="imgIndex"
          class="el-upload-list__item"
          v-for="(img, imgIndex) in theImages"
          :key="imgIndex"
        >
          <el-image
            :src="img"
            :preview-src-list="imageUrls()"
            alt=""
            class="el-upload-list__item-thumbnail"
          ></el-image>
          <el-popconfirm title="确定删除吗？" @onConfirm="onRemove(imgIndex)">
            <i class="el-icon-close" slot="reference"></i>
          </el-popconfirm>
        </li>
      </ul>
      <ul
        class="el-upload-list el-upload-list--picture-card"
        v-if="typeof theImages == 'string' && theImages != ''"
      >
        <li class="el-upload-list__item">
          <el-image
            :src="theImages + '?imageView2/1/w/180/h/180/format/jpg/q/100'"
            :preview-src-list="imageUrls()"
            alt=""
            class="el-upload-list__item-thumbnail"
          ></el-image>
          <el-popconfirm title="确定删除吗？" @onConfirm="onRemove(0)">
            <i class="el-icon-close" slot="reference"></i>
          </el-popconfirm>
        </li>
      </ul>

      <div
        tabindex="0"
        class="el-upload el-upload--picture-card"
        v-if="
          (multiple && theImages.length < limit) ||
          (!multiple && (theImages == '' || theImages == undefined))
        "
        @click="onUpload"
      >
        <i class="el-icon-plus"></i>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
export default {
  name: "ZzImgbox",
  model: {
    prop: "images",
    event: "change",
  },

  props: {
    multiple: { type: Boolean, default: false }, // 是否支持选取多个图片
    limit: { type: Number, default: 9 }, // 最多可选择图片数量
    images: { type: [Array, String], default: () => [] }, // 已选图片
  },

  data() {
    return {
      isLoading: true,
      theImages: this.images,
      uploadSuccessCount: 0,

      imgRes: {
        items: [],
        total: 0,
      },
    };
  },

  watch: {
    theImages() {
      this.$emit("change", this.theImages);
    },
    images() {
      this.theImages = this.images;
    },
  },

  methods: {
    onUpload() {
      let _this = this;
      let imgs = this.theImages;
      if (!_this.multiple && !imgs) {
        imgs = "";
      }
      if (_this.multiple && !imgs) {
        imgs = [];
      }

      let objs = [];
      if (typeof imgs == "object") {
        imgs.forEach((v, i) => {
          objs.push({
            thumb: v + "?imageView2/1/w/180/h/180/format/jpg/q/100",
            url: v,
          });
        });
      } else {
        if (imgs != "") {
          objs.push({
            thumb: imgs + "?imageView2/1/w/180/h/180/format/jpg/q/100",
            url: imgs,
          });
        }
      }

      this.$zzImgbox(
        {
          multiple: _this.multiple, // 是否支持选取多个图片
          limit: _this.limit, // 最多可选择图片数量
          callback: (res) => {
            console.log("回调", res);
            let images = [];
            res.forEach((v, i) => {
              if (_this.multiple) {
                images.push(v.url);
              } else {
                images = v.url;
              }
            });
            console.log("回调玩", images);
            _this.theImages = images;
          },
        },
        objs
      );
    },

    onRemove(imgIndex) {
      if (typeof this.theImages == "string") {
        this.theImages = "";
      } else if (typeof this.theImages == "object") {
        this.theImages.splice(imgIndex, 1);
      }
    },

    imageUrls() {
      let urls = [];
      if (typeof this.theImages == "string" && !this.multiple) {
        urls.push(this.theImages);
      } else if (typeof this.theImages == "object") {
        for (let item of this.theImages) {
          urls.push(item.url);
        }
      }
      return urls;
    },
  },

  mounted() {},

  computed: {},
};
</script>

<style lang="scss">
.zz-images {
  padding: 5px 0;
  line-height: 0;
  .el-upload-list__item,
  .el-upload {
    width: 78px;
    height: 78px;
    line-height: 82px;
    border-radius: 5px;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    overflow: visible;
    $thumb-size: 16px;
    .el-icon-close {
      position: absolute;
      right: -6px;
      top: -6px;
      width: $thumb-size;
      height: $thumb-size;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: block !important;
      font-size: 12px;
      line-height: $thumb-size;
      text-align: center;
      color: #fff;
    }
  }

  .el-upload-list__item-actions {
    a {
      i {
        color: #fff;
      }
    }
  }
}

.single-img .el-upload-list--picture-card .el-upload-list__item {
  margin: 0;
}
</style>
